<!-- 搜索框组件  -->
<template>
  <div class="search">
    <input v-model="keyWord" type="text" placeholder="请输入关键字..." />
    <div class="search-logo iconfont icon-sousuo" @click="toSearch"></div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'search',
  data () {
    return {
      keyWord: ''
    }
  },
  methods: {
    ...mapMutations(['SEARCH']),
    toSearch () {
      if (this.keyWord !== '') {
        this.SEARCH(this.keyWord)
        this.$router.push({
          path: '/searchResult',
          query: {keyWord: this.keyWord}
        })
      } else {
        this.$message({
          showClose: true,
          message: '请输入搜索内容',
          type: 'error'
        })
      }
    }
  },
  watch: {
    $route (to) {
      let str = to.path.slice(1)
      if (str !== 'searchResult') {
        this.keyWord = ''
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
  .search {
  width: 4.8rem;
  height: 0.6rem;
  float: right;
  margin: 0.3rem;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  border: 1px solid #4d555d;
}
.search > input {
  width: 3.2rem;
  height: 100%;
  border-radius: 8px;
  padding: 0 0 0 10px;
  margin: 0;
  border: transparent;
}
.search > .search-logo {
  width: 0.64rem;
  height: 100%;
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.32rem;
  color: #93999f;
  cursor: pointer;
}

</style>
